---
import ItemContent from "@components/style/ItemContent.astro"

---
<!-- tab头部 -->
<div
  id="hot-category-box"
>
  <ItemContent>
  <div
    class=" max-lg:w-screen flex flex-nowrap items-center overflow-hidden max-lg:overflow-auto justify-between mx-auto"
  >
    <ul
      class="flex max-w-3xl flex-nowrap text-sm font-medium text-center relative whitespace-nowrap"
      id="index-tab-title-box"
      data-tabs-toggle="#index-tab-content"
      data-tabs-active-classes="text-purple-600 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-500 border-orange-500 border-b-[3px] dark:border-rose-950"
      data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
      role="tablist"
    >
      <slot />
    </ul>
  </div>
  </ItemContent>
</div>
<style>
  .hot-category-box {
    position: fixed;
    width: 100vw;
    top: 60px;
    left: 0;
    z-index: 40;
  }
  /* 定义滚动条样式 */
  #hot-category-box > div::-webkit-scrollbar {
    display: none;
  }
</style>

<script>
import scrollManager  from '@/utils/scrollManager.js';
  document.addEventListener('DOMContentLoaded', () => {
    // 事件处理函数
    const handleScroll = function (scrollTop) {
      const m = document.querySelector('#hot-category-box');    
      if (m) {
        if (scrollTop > 580) {
          m.classList.add('hot-category-box');
        } else {
          m.classList.remove('hot-category-box');
        }
      }
    };
    
    // 使用滚动管理器注册滚动监听器
    scrollManager.register('indexTabHeard', handleScroll);
    
    // 清理函数
    return () => {
      scrollManager.unregister('indexTabHeard');
    };
  });
</script>

<script>
      const MAX_WIDTH = 768;
      const SCROLL_THRESHOLD = 700;
      let listContainer;
      let isDrag = false;
      let initialMousePos = 0;
      let initialContentOffset = 0;
      let maxLeft = 0;

      document.addEventListener('DOMContentLoaded', () => {
        listContainer = document.getElementById("index-tab-title-box");
        if (!listContainer) return;

        // 计算最大可滚动距离
        maxLeft = listContainer.scrollWidth > MAX_WIDTH ? MAX_WIDTH - listContainer.scrollWidth : 0;
        
        // 初始化left样式，避免undefined问题
        if (!listContainer.style.left) {
          listContainer.style.left = '0px';
        }

        const heardStart = (e) => {
          // 鼠标事件只处理左键点击
          if (e.type === 'mousedown' && e.button !== 0) return;
          
          isDrag = true;
          // 对于触摸事件，使用touches[0].clientX
          initialMousePos = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
          
          // 安全地获取当前left值，提供默认值0
          initialContentOffset = parseInt(listContainer.style.left) || 0;
        };

        const heardMove = (e) => {
          if (!isDrag || maxLeft === 0) return;
          
          // 防止拖动时文本被选中
          e.preventDefault();
          
          // 获取当前鼠标/触摸位置
          const currentPos = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
          const delta = currentPos - initialMousePos;
          const left = initialContentOffset + delta;
          
          // 简化边界检查逻辑
          const constrainedLeft = Math.max(Math.min(left, 0), maxLeft);
          
          // 使用requestAnimationFrame优化性能
          requestAnimationFrame(() => {
            listContainer.style.left = constrainedLeft + "px";
          });
        };

        const heardStop = () => {
          isDrag = false;
        };

        // 添加事件监听器
        listContainer.addEventListener("mousedown", heardStart);
        listContainer.addEventListener("touchstart", heardStart);
        listContainer.addEventListener("mousemove", heardMove);
        listContainer.addEventListener("touchmove", heardMove);
        listContainer.addEventListener("mouseup", heardStop);
        listContainer.addEventListener("touchend", heardStop);
        listContainer.addEventListener("mouseleave", heardStop); // 添加mouseleave事件以完善交互

        // 点击标题返回顶部按钮监听器
        listContainer.addEventListener("click", function () {
          if (window.scrollY > SCROLL_THRESHOLD) {
            window.scrollTo({
              top: 0,
              behavior: "smooth",
            });
          }
        });

        // 组件卸载时清理事件监听器
        return () => {
          listContainer.removeEventListener("mousedown", heardStart);
          listContainer.removeEventListener("touchstart", heardStart);
          listContainer.removeEventListener("mousemove", heardMove);
          listContainer.removeEventListener("touchmove", heardMove);
          listContainer.removeEventListener("mouseup", heardStop);
          listContainer.removeEventListener("touchend", heardStop);
          listContainer.removeEventListener("mouseleave", heardStop);
          listContainer.removeEventListener("click", () => {});
        };
      });
</script>

